// 我自己封装一些全局指令
// 情况1: 对象+install方法
// const directiveObj = {
//   install (Vue) {
//     // Vue函数相当于import Vue from 'vue'
//     console.log(Vue)
//     // 全局指令的方法
//     Vue.directive('fofo', {
//     // 指令所在标签, 插入到真实DOM时, 才触发
//       inserted (el) {
//       // van-search组件封装一套div里包含input
//       // el是原生的div标签
//       // 往里获取到input
//       // JS触发标签事件, 直接.事件名()
//         el.querySelector('input').focus()
//       }
//     })
//   }
// }
// export default directiveObj
// 情况2: 导出的函数(不是对象+install方法)
// function fn (el) {

// }
export default function (Vue) {
  Vue.directive('fofo', {
    // 指令所在标签, 插入到真实DOM时, 才触发
    inserted (el) {
      // van-search组件封装一套div里包含input
      // el是原生的div标签
      // 往里获取到input
      // JS触发标签事件, 直接.事件名()\
      if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
        el.focus()
      } else {
        // el不是输入框, 尝试往里查找
        const inp = el.querySelector('input')
        const textA = el.querySelector('textarea')
        if (inp) {
          inp.focus()
        }
        if (textA) {
          textA.focus()
        }
      }
    },
    // 指令所在标签, 发生更新时触发, (例如: display:none隐藏->出现)
    update (el) {
      if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
        el.focus()
      } else {
        // el不是输入框, 尝试往里查找
        const inp = el.querySelector('input')
        const textA = el.querySelector('textarea')
        if (inp) {
          inp.focus()
        }
        if (textA) {
          textA.focus()
        }
      }
    }
  })
}
